<template>
	<view>
		<view style="margin: 20rpx 20rpx 0rpx 20rpx;">
			<u-button text="新增" type="primary" @click="onAdd"></u-button>
		</view>
		<template v-if="dataSource && dataSource.length">
			<view class="inforamtion" style="display: flex;" v-for="(item, index) in dataSource" :key="index">
				<view >
					<view class="option" style="width: 520rpx;">
						<view class="lf">投标单位</view>
						<view class="rl">{{ item.tenderUnit}}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">投标金额(元)</view>
						<view class="rl">{{ item.tenderAmount }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">中标结果</view>
						<view class="rl">{{ filterMultiDictText(dictOptions['bidResult'], item.bidResult + '') }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">说明</view>
						<view class="rl">{{ item.instruction }}</view>
					</view>
					
				</view>
				<view  style="flex: 1; display: flex; align-items: center; justify-content: flex-end;">
					<u-icon name="edit-pen-fill" color="#2979ff" size="20" @click="onEdit(item, index)"></u-icon>
					<u-line  direction="col" length="20" margin="0 10rpx"></u-line>
					<u-icon name="trash-fill" color="#2979ff" size="20"  @click="onDelete(item, index)"></u-icon>
				</view>
			</view>
		</template>
		<view v-else>
			<u-empty
				mode="data"
				text="暂无数据"
				icon="/static/empty/data.png"
			></u-empty>
		</view>
		
		<!-- 弹窗表单 -->
		<u-popup :show="showPopupInput" @close="closePopupInput" :round="10">
			<view style="background-color: #ffffff; border-radius: 10px; padding: 30rpx;">
				<u--form
					:rules="rules"
					labelPosition="top"
					:model="model"
					ref="form"
					labelWidth="auto"
					:labelStyle="{
						fontSize: '14px',
						color: '#B2B2B2',
						lineHight: '20px'
					}"
				>
					<u-form-item
						label="投标单位"
						prop="tenderUnit"
						:borderBottom="false"
						ref="item1"
						required
					>
						<u--input
							v-model="model.tenderUnit"
							placeholder="请输入投标单位"
							border="surround"
							:suffixIconStyle="{color: '#B2B2B2'}"
						></u--input>
					</u-form-item>
					<u-form-item
						label="投标金额(元)"
						prop="tenderAmount"
						:borderBottom="false"
						ref="item1"
					>
						<h-money-input placeholder="请输入投标金额" v-model="model.tenderAmount"></h-money-input>
					</u-form-item>
					<u-form-item
						label="中标结果"
						prop="bidResult"
						:borderBottom="false"
						ref="item1"
						required
					>
						<h-dict-select
							style="width: 100%" 
							v-model="model.bidResult" 
							placeholder="请选择中标结果" 
							dictName="bid_result"
							suffixIcon="arrow-down-fill" 
							:suffixIconStyle="{color: '#B2B2B2'}"
						></h-dict-select>
					</u-form-item>
					<u-form-item
						label="说明"
						prop="instruction"
						:borderBottom="false"
						ref="item1"
					>
						<u--textarea
							v-model="model.instruction"
							:confirmType="null"
							count
							placeholder="请输入说明"
							:maxlength="500"
						></u--textarea>
					</u-form-item>
				</u--form>
				<view style="padding:20rpx 0;">
					<u-button text="确定" type="primary" @click="onConfirmPopupInput"></u-button>
				</view>
			</view>
		</u-popup>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import {
	filesBusinessCategoryList, // 业务分类列表
	
} from '@/api/index.js'
import { filterMultiDictText, initDictOptions } from '@/utils/JDictSelectUtil.js'
export default {
	props: {
		dataList: {
			type: [Array],
			default: () => [],
		},
		bidResult: {
			type: [Number, String],
			default: '',
		}
	},
	data() {
		return {
			// 是否需要修改中标判断
			needReset: false,
			filterMultiDictText,
			initDictOptions,
			dictOptions: {},
			
			showPopupInput: false, // 表单弹窗
			getFilesBusinessCategoryList: [], // 业务分类列表
			model: {
				tenderUnit: '', // 投标单位
				tenderAmount: '',// 投標金額
				bidResult: '', // 中标结果
				instruction: '',// 输入说明
			},
			
			rules: {
				tenderUnit: [
					{ required: true, message: '请输入投标单位!', trigger: ['change','blur'], },
				],
				bidResult: [
					{ required: true, message: '请选择中标结果!', trigger: ['change','blur'], },
				],
			},
			dataSource: [], // 数组
			editIndex: 0, // 编辑的下标
		};
	},
	onLoad(options) {
		this.initDictConfig()
	},
	watch: {
		dataList: {
			handler (val) {
				if (val && val.length) {
					this.dataSource = val
					this.initDictConfig()
				}
			},
			immediate: true
		}
	},
	computed: {
		hasBid() {
			let winTheBidUnit = this.dataSource.filter((unit)=>{
			return unit.bidResult == "1";
			});
			// 根据winTheBidUnit更新中标状态
			if(winTheBidUnit.length===0){
				return false;
			}else{
				return true;
			}
		},
		// 子表是否已有中标
		isWinTheBid () {
			return this.hasBid
		}
	},
	methods: {
		initDictConfig() {
			initDictOptions('bid_result').then((res) => {
				if (res.success) {
					this.$set(this.dictOptions, 'bidResult', res.result)
				}
			})
		},
		
		// 新增
		onAdd () {
			this.model = {
				tenderUnit: '', // 投标单位
				tenderAmount: '',// 投標金額
				bidResult: '', // 中标结果
				instruction: '',// 输入说明
			}
			// this.getList()
			this.showPopupInput = true
		},
		// 编辑
		onEdit (item, index) {
			this.editIndex = index
			this.model = {...item}
			// this.getList()
			this.showPopupInput = true
		},
		// 删除
		onDelete (item, index) {
			var _this = this
			uni.showModal({
				content: '确定删除吗？',
				success (res) {
						if (res.confirm) {
							_this.dataSource.splice(index, 1);
						} else if (res.cancel) {
							// 用户点击取消
						}
					}
			})
			
		},
		closePopupInput () {
			this.showPopupInput = false
		},
		onConfirmPopupInput () {
			// 已经有投标了
			if(this.bidResult =='1' && this.model.bidResult == '1'){
				uni.showToast({
					title: '外部单位与内部单位只可有一个中标',
					icon: 'none'
				})
				return false
			}
			var result = this.dataSource.some(item => {
				if (this.model.id && this.model.id == item.id) {
					return false
				} else if ( item.bidResult == '1') {
					return true
				}
			})
			if(this.model.bidResult =='1' && result){
				uni.showToast({
					title: '已有中标单位',
					icon: 'none'
				})
				return false
			}
			this.$refs.form.validate().then(res => {
				if(res){
					if (!this.model.id) {
						this.model.id = parseInt(Math.random() * 1000000000000);
						this.dataSource.push(this.model);
					} else {
						this.dataSource.splice(this.editIndex, 1, this.model);
					}
					this.showPopupInput = false
					this.$emit('ok', this.dataSource)
				}
			})
		},
	}
};
</script>

<style lang="scss" scoped>
	.inforamtion{
		margin-top: 10rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
	}
</style>